<template>
  <div class="container">
    <input type="number" v-model="num1" />
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
      <option>%</option>
    </select>
    <input type="number" v-model="num2" />
    <button @click="fun()">=</button>
    <input type="number" v-model="num3" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title1: "计算器",
      num1: 0,
      num2: 0,
      num3: 0,
      selected: "",
    };
  },
  methods: {
    fun() {
      if (this.selected == "+") {
        this.num3 = +this.num1 + +this.num2;
      } else if (this.selected == "-") {
        this.num3 = this.num1 - this.num2;
      } else if (this.selected == "*") {
        this.num3 = this.num1 * this.num2;
      } else if (this.selected == "/") {
        this.num3 = this.num1 / this.num2;
      }else if (this.selected == "%") {
        this.num3 = this.num1 % this.num2;
      }
    },
  },
};
</script>

<style scoped>
input{
  width: 100px;
  height: 20px;
}
select{
  height: 25px;
  margin-left: 10px;
  margin-right: 10px;
}
button{
  height: 25px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
